<template>
  <div>
    <a-card
      :bordered="false"
      :body-style="{paddingTop: '40px'}"
      size="default">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <!--
              <a-form-item label="服务区域">
                <a-select v-model="queryParam.zone_name" placeholder="请选择" default-value="">
                  <a-select-option value="核心交換區域">核心交換區域</a-select-option>
                  <a-select-option value="雲服務區域">雲服務區域</a-select-option>
                  <a-select-option value="安全緩衝帶">安全緩衝帶</a-select-option>
                  <a-select-option value="視頻網">視頻網</a-select-option>
                  <a-select-option value="二級雲服務區域">二級雲服務區域</a-select-option>
                </a-select>
              </a-form-item>
              -->
              <a-form-item label="所属平台">
                <a-select v-model="queryParam.zone_name" placeholder="请选择" default-value="">
                  <a-select-option value="大腦雲">大腦雲</a-select-option>
                  <a-select-option value="小腦雲">小腦雲</a-select-option>
                  <a-select-option value="數據災備中心">數據災備中心</a-select-option>
                  <a-select-option value="核心交換平臺">核心交換平臺</a-select-option>
                  <a-select-option value="邊界安全平臺">邊界安全平臺</a-select-option>
                  <a-select-option value="安全訪問平臺">安全訪問平臺</a-select-option>
                  <a-select-option value="資料交換平臺">資料交換平臺</a-select-option>
                  <a-select-option value="司警數據雲節點">司警數據雲節點</a-select-option>
                  <a-select-option value="海關數據雲節點">海關數據雲節點</a-select-option>
                  <a-select-option value="治安數據雲節點">治安數據雲節點</a-select-option>
                  <a-select-option value="測試中心雲">測試中心雲</a-select-option>
                  <a-select-option value="視頻中心雲">視頻中心雲</a-select-option>
                  <a-select-option value="治安視頻雲">治安視頻雲</a-select-option>
                  <a-select-option value="海關視頻雲">海關視頻雲</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="设备类型">
                <a-select v-model="queryParam.dev_type" placeholder="请选择" default-value="">
                  <a-select-option value="服务器">服务器</a-select-option>
                  <a-select-option value="交换机">交换机</a-select-option>
                  <a-select-option value="防火墙">防火墙</a-select-option>
                  <a-select-option value="存储设备">存储设备</a-select-option>
                  <a-select-option value="安全设备">安全设备</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="设备名称">
                <a-input v-model="queryParam.node" placeholder=""/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="设备地址">
                <a-input v-model="queryParam.node_alias" placeholder=""/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="reset()">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <a-spin :spinning="loading">
        <a-table
          ref="table"
          :columns="columns"
          :dataSource="data"
          :scroll="{ x: scrollx}"
          :pagination="pagination"
          @change="handleTableChange"
          rowKey="id"
        >
          <span slot="ne_status" slot-scope="text">
            <a-badge status="success" text="在线" v-if="text === 0"/>
            <a-badge status="warning" text="离线" v-if="text === -1"/>
            <a-badge status="default" text="未知" v-if="text === -2"/>
            <a-badge status="default" text="待纳管" v-if="text === 99"/>
          </span>
          <span slot="status" slot-scope="text">
            <a-badge status="success" text="正常" v-if="text === 0"/>
            <a-badge status="warning" text="一般" v-if="text === 3"/>
            <a-badge status="error" text="严重" v-if="text === 5"/>
          </span>
          <span slot="dictValue" slot-scope="text">
            <ellipsis :length="80" tooltip>{{ text }}</ellipsis>
          </span>
          <span slot="operate" slot-scope="text, record">
            <template>
              <a v-if="record.dn !== '' && record.dev_type === '服务器'"><router-link :to="{ path: '/patrol/srv-detail', query: { node: record.node, node_alias: record.node_alias, status: record.status, dev_vendor: record.dev_vendor, dev_type: record.dev_type, dn: record.dn } }">详情</router-link></a>
              <a v-if="record.dn !== '' && record.dev_type === '交换机'"><router-link :to="{ path: '/patrol/net-detail', query: { node: record.node, node_alias: record.node_alias, status: record.status, dev_vendor: record.dev_vendor, dev_type: record.dev_type, dn: record.dn } }">详情</router-link></a>
            </template>
          </span>
        </a-table>
      </a-spin>
    </a-card>

  </div>
</template>

<script>
import { sqlFindOne } from '@/api/sql'
import { patrolDeviceStatus } from '@/api/patrol'
import { Ellipsis } from '@/components'

export default {
  name: 'PatrolList',

  components: {
    Ellipsis
  },

  data () {
    return {
      routerPermission: {}, 
      loading: false,
      visible: false,
      confirmLoading: false,
      scrollx: 1500,

      columns: [
        {
          title: '设备名称',
          dataIndex: 'node',
          scopedSlots: { customRender: 'node' },
          width: 200
        }, 
        {
          title: '设备地址',
          dataIndex: 'node_alias',
          width: 150
        }, 
        {
          title: '设备类型',
          dataIndex: 'dev_type',
          width: 150
        }, 
        {
          title: '设备厂商',
          dataIndex: 'dev_vendor',
          width: 150
        }, 
        {
          title: '所属平台',
          dataIndex: 'pcs_name',
          width: 150
        },
        {
          title: '数据中心',
          dataIndex: 'location',
          width: 150
        }, 
        {
          title: '设备状态',
          dataIndex: 'ne_status',
          width: 100,
          scopedSlots: { customRender: 'ne_status' }
        }, 
        /*
        {
          title: '告警状态',
          dataIndex: 'status',
          width: 100,
          scopedSlots: { customRender: 'status' }
        }, 
        */
        {
          title: '操作',
          fixed: 'right',
          width: '100px',
          dataIndex: 'operate',
          scopedSlots: { customRender: 'operate' }
        }
      ],

      data: [],

      // 查询参数
      queryParam: {},

      // 分页属性
      pagination: {
        page: 0,
        pageNo: 0,
        pageSize: 10, // 默认每页显示数量
        showSizeChanger: true, // 显示可改变每页数量
        showQuickJumper: true, // 是否可以快速跳转至某页
        pageSizeOptions: ['10', '20', '50', '100'], // 每页数量选项
        showTotal: total => this.$t('pagination.total') + ` ${total} ` + this.$t('pagination.items'), // 分页中显示总的数据
        total: 0 // 总条数
      }
    }
  },

  created () {
  },

  mounted () {
    // 测试用: 模拟静态数据
    // this.getPatrolList()

    // 生产用: 发起API请求
    this.getData(this.pagination.page, this.pagination.pageSize)
  },

  methods: {
    getPatrolList () {
      this.data = [
        { 
          id: 1, 
          node: '1288H V5-172.16.0.48', 
          node_alias: '172.16.0.48',
          app_name: 'omc',
          dev_type: '服务器',
          dev_vendor: 'Huawei',
          dev_func: '测试节点',
          sys_zone: '小脑',
          location: '上海',
          status: 0
        },
        { 
          id: 2, 
          node: 'XCC-7X06-J301HGNV', 
          node_alias: '172.16.0.41',
          app_name: 'omc',
          dev_type: '交换机',
          dev_vendor: 'Lenovo',
          dev_func: '测试节点',
          sys_zone: '小脑',
          location: '上海',
          status: 1
        },
        { 
          id: 3, 
          node: '1288H V5-172.16.0.48', 
          node_alias: '172.16.0.48',
          app_name: 'omc',
          dev_type: '服务器',
          dev_vendor: 'Huawei',
          dev_func: '测试节点',
          sys_zone: '小脑',
          location: '上海',
          status: 0
        },
        { 
          id: 4, 
          node: 'XCC-7X06-J301HGNV', 
          node_alias: '172.16.0.41',
          app_name: 'omc',
          dev_type: '交换机',
          dev_vendor: 'Lenovo',
          dev_func: '测试节点',
          sys_zone: '小脑',
          location: '上海',
          status: 1
        },
        { 
          id: 5, 
          node: '1288H V5-172.16.0.48', 
          node_alias: '172.16.0.48',
          app_name: 'omc',
          dev_type: '服务器',
          dev_vendor: 'Huawei',
          dev_func: '测试节点',
          sys_zone: '小脑',
          location: '上海',
          status: 0
        },
        { 
          id: 6, 
          node: 'XCC-7X06-J301HGNV', 
          node_alias: '172.16.0.41',
          app_name: 'omc',
          dev_type: '交换机',
          dev_vendor: 'Lenovo',
          dev_func: '测试节点',
          sys_zone: '小脑',
          location: '上海',
          status: 1
        },
        { 
          id: 7, 
          node: '1288H V5-172.16.0.48', 
          node_alias: '172.16.0.48',
          app_name: 'omc',
          dev_type: '服务器',
          dev_vendor: 'Huawei',
          dev_func: '测试节点',
          sys_zone: '小脑',
          location: '上海',
          status: 0
        },
        { 
          id: 8, 
          node: 'XCC-7X06-J301HGNV', 
          node_alias: '172.16.0.41',
          app_name: 'omc',
          dev_type: '交换机',
          dev_vendor: 'Lenovo',
          dev_func: '测试节点',
          sys_zone: '小脑',
          location: '上海',
          status: 1
        }
      ]
      this.loading = false
    },

    reset () {
      this.queryParam = {}
    },

    refresh (status) {
      if (status) {
        this.pagination.current = 1
        this.pagination.pageNo = 0
      }

      /*
      const parameter = {
        skip: this.pagination.pageNo,
        limit: this.pagination.pageSize
      }
      Object.assign(parameter, this.queryParam)
      */

      this.getData(this.pagination.page, this.pagination.pageSize)
    },   

    // 请求数据
    async getData (page, size) {
      this.data = await this.getList(page, size)
      this.pagination.total = await this.getTotal()
      console.log(' this.pagination.total', this.pagination.total)
    },

    // 切换分页后重新请求数据
    handleTableChange (pagination) {
      this.pagination.pageSize = pagination.pageSize
      this.pagination.page = pagination.current - 1
      this.getData(this.pagination.page, this.pagination.pageSize)
    },

    // 获取明细列表
    getList (page, size) {
      const params = {
        node: this.queryParam.node,
        node_alias: this.queryParam.node_alias,
        dev_type: this.queryParam.dev_type,
        zone_name: this.queryParam.zone_name,

        page: page,
        size: size
      }

      return new Promise((resolve, reject) => {
        patrolDeviceStatus(params).then(
          (res) => {
            resolve(res)
          },
          (error) => {
            console.log(error)
            resolve(error)
          }
        )
      })
    },

    // 获取条目总数
    getTotal () {
      const params = {
        sql: 'select count(*) as total from cmdb.devices'
      }
      return new Promise((resolve, reject) => {
        sqlFindOne(params).then(
          (res) => {
            resolve(res.total)
          },
          (error) => {
            console.log(error)
            resolve(error)
          }
        )
      })
    }
  }
}
</script>

<style>
.ant-card-body {
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-bottom: 20px !important;
}
.antd-pro-components-standard-form-row-index-label > span {
  width: 150px;
  height: auto !important;
  border-right: 3px solid #1890ff;
  background: #e6f7ff;
}
/* .table-page-search-wrapper .ant-form-inline .ant-form-item .ant-form-item-control-wrapper{
    margin-top: 5px!important;
}
.table-page-search-wrapper .ant-form-inline .ant-form-item .ant-form-item-label{
    margin-top: 5px!important;
} */
</style>
<style lang="less" scoped>
.table-operator{
  margin-bottom:10px;
}
/deep/ .ant-card-head{
  padding: 0 20px;
}
.table-page-search-wrapper .ant-form-inline .ant-form-item{
  margin-bottom: 20px;
}
.ant-pro-components-tag-select {
  /deep/ .ant-pro-tag-select .ant-tag {
    margin-right: 24px;
    padding: 0 8px;
    font-size: 14px;
  }
}
.ant-pro-pages-list-projects-cardList {
  margin-top: 24px;

  /deep/ .ant-card-meta-title {
    margin-bottom: 4px;
  }

  /deep/ .ant-card-meta-description {
    height: 44px;
    overflow: hidden;
    line-height: 22px;
  }

  .cardItemContent {
    display: flex;
    height: 20px;
    margin-top: 16px;
    margin-bottom: -4px;
    line-height: 20px;

    > span {
      flex: 1 1;
      color: rgba(0, 0, 0, 0.45);
      font-size: 12px;
    }

    /deep/ .ant-pro-avatar-list {
      flex: 0 1 auto;
    }
  }
}
</style>
<style lang="less" scoped>
.checkable{
  margin-bottom: 10px;
  padding:5px 0;
  border-bottom: 1px dashed #e8e8e8;
  >span{
    float: left;
    padding-right: 5px;
    width: 100px;
    color: #888;
    height: auto !important;
  }
  .checkable-right{
    margin-left: 100px;
    .ant-tag-checkable{
      color: #333;
    }
    .ant-tag-checkable-checked{
      color: #fff;
    }
  }
}
.search-btn-handle{
  .table-page-search-submitButtons{
    float: right;
  }
}
.ant-table-default {
  background: #f00 !important;
  .ant-table-content {
    .ant-table-thead > tr > th > {
      padding: 10px 16px;
    }
    .ant-table-tbody > tr > td > {
      padding: 10px 16px;
    }
  }
}
</style>
